<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">礼品兑换码</block>
		</cu-custom>
		<view class="bg02" style="background-image:url('/static/images/bg04.png')">
			<view class="qui-cells qui-card bg03 bg-transparent" style="background-image:url('/static/images/bg03.png')">
				<view class="qui-cell border_none">
					<view class="cell-hd">
						<image :src="`${imgurl}${sourModel.Giftimage}`" class="img84"></image>
					</view>
					<view class="cell-bd fs28 mr30" v-text="sourModel.GiftName"></view>
					<view class="cell-ft tr">
						<view class="fs34 ff text-black" v-text="`￥${sourModel.GiftValue || ''}`"></view>
						<view class="fs20 text-muted">礼品价值</view>
					</view>
				</view>
				<view class="qui-cell ">
					<view class="cell-bd tc pt30">
						<image :src="sourModel.qrimg" class="img250"></image>
						<view class="fs26 ff pt20" style="letter-spacing: 6rpx;" v-text="sourModel.Code"></view>
					</view>
					<view>
						<!-- 已兑换 或  已过期 -->
						<image v-if="sourModel.Status==7 || sourModel.Status==10" src="/static/images/guoqi.png" class="zt_img"></image>					
					</view>
				</view>
			</view>
			<view class="qui-cells qui-card">
				<navigator :url="redirtedUrl" class="qui-cell">
					<view class="cell-bd">
						<view class="fs26 fw600">核销门店</view>
					</view>
					<view class="cell-ft">
						<view class="fs24" style="color: #ff5e1f;">更多</view>
					</view>
				</navigator>
				<view class="qui-cell">
					<view class="cell-bd">
						<view class="fs30 fw600" v-text="sourModel.ShopName||'附近暂无门店'"></view>
					</view>
					<view class="cell-ft">
						<view>
							<image :src="imgurl+'/icon_address.png'" class="img22 mr10"></image>
							<text class="fs22 text-gray">距您{{Math.floor(parseFloat(sourModel.Distance || 0) * 100) / 100}}</text>
						</view>
					</view>
					<view class="arrow-r"></view>
				</view>
			</view>

			<view class="qui-cells qui-card">
				<view class="qui-cell">
					<view class="cell-bd">
						<view class="fs26 fw600" @tap="GetPosition()">领奖须知</view>
						<view class="fs22 text-gray mt20">1、优惠券有使用期限限制，过了有效期不能使用；</view>
						<view class="fs22 text-gray">2、订单中包含特价商品时不能使用优惠券，优惠券不能与其他优惠（如促销活动）同时使用；</view>
						<view class="fs22 text-gray">3、优惠券只能抵扣订单金额，优惠金额超出订单金额部分不能再次使用，不能兑换现金；</view>
						<view class="fs22 text-gray">4、每个订单只能使用一张优惠券；</view>
						<view v-show="openbox">
							<view class="fs22 text-gray">2、订单中包含特价商品时不能使用优惠券，优惠券不能与其他优惠（如促销活动）同时使用；</view>
							<view class="fs22 text-gray">3、优惠券只能抵扣订单金额，优惠金额超出订单金额部分不能再次使用，不能兑换现金；</view>
							<view class="fs22 text-gray">4、每个订单只能使用一张优惠券；</view>
						</view>
						<view @tap="showbox" class="tc flex justify-center align-center mt30" style="background-color: #f6f6f6;">
							<view class="cell-ft fs20">展开全部</view>
							<view class="arrow-r"></view>
						</view>

					</view>
				</view>
			</view>
		</view>


	</view>
</template>

<script src="http://map.qq.com/api/js?v=2.exp" type="text/javascript"></script>
<script>
	import tools from 'utils/tools.js';
	import base from 'utils/base.js';
	import QR from 'utils/wxqrcode.js';
	export default {
		data() {
			return {
				openbox: false,
				imgurl: this.imgurl,
				good_img: uni.getStorageSync('goods_img'),
				sourModel: {},
				latitude: 23.126168,
				longitude: 113.387924
			}
		},
		mounted() {
			this.GetPosition();
			//this.lodingInitPage();
		},
		methods: {
			showbox() {
				this.openbox = !this.openbox;
			},
			lodingInitPage(options) {
				uni.showLoading({
					title: '加载中',
					mask: true
				});

				var _this = this;
				//获取用户信息
				let globalData = getApp().globalData;
				let userInfo = globalData.UserInfo;
				var requstData = {
					"OpenId": userInfo.OpenID,
					"ActivityPrizeType": 3,
					"ActivityPrizeHistoryId": options.Id || 0,
					"ActivityId": options.ActivityId || 0,
					"Lat": _this.latitude,
					"Lng": _this.longitude
				}
				let params = {
					hideLoading: true,
					type: 'POST',
					url: '/Activity/GiftExchangeServices',
					data: requstData,
					sCallback: function(response) {
						uni.hideLoading();
						if (response.Success) {
							var thisSour = response.Data;
							if ((thisSour || []).length == 0) return false;

							_this.sourModel = thisSour;

                            _this.sourModel.qrimg = QR.createQrCodeImg(_this.sourModel.Code, {
								size: parseInt(150) //二维码大小  
							})

						} else {
							uni.showToast({
								icon: 'none',
								title: response.Msg
							});
						}
					}
				};
				base.ActivityRequest(params);
			},
			//获取个人定位信息
			GetPosition() {
				var _this = this;
				// if (navigator.geolocation) {
				// 	navigator.geolocation.getCurrentPosition(
				// 		function(position) { //传入了对象position
				// 			console.log(`longitude:${position.coords.latitude}  longitude:${position.coords.longitude}`);
				// 			_this.latitude = position.coords.latitude;
				// 			_this.longitude = position.coords.longitude;
				// 			_this.lodingInitPage();
				// 		},
				// 		function(err) { //传入了error对象
				// 			uni.showToast({
				// 				icon: 'none',
				// 				title: "获取定位信息失败！请检查GPS是否打开！"
				// 			});
				// 		})
				// } else {
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: "获取定位信息失败！"
				// 	});
				// }

				uni.getLocation({
					type: 'gcj02',
					success: function(res) {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						_this.latitude = res.latitude;
						_this.longitude = res.longitude;
						_this.lodingInitPage();
					},
				});
			},

		},
		computed: {
			redirtedUrl() {
				return `/pages/my/shop?lat=${this.latitude}&lng=${this.longitude}`;
			},

		},
		onLoad(options) {
			let time = 0;
			let globalData = getApp().globalData;
			let current = this;
			let si = setInterval(function() {
				time = time + 1;
				if (globalData.ticket) {
					current.lodingInitPage(options);
					clearInterval(si);
				}
				if (time > 40) clearInterval(si);
			}, 200);
		}
	}
</script>

<style lang="scss">
	.bg02 {
		background-size: 100%;
		height: 250rpx;
		background-repeat: no-repeat;
		padding-top: 20rpx;
	}

	.bg03 {
		background-size: 100%;
		background-repeat: no-repeat;
		padding-top: 20rpx;
	}

	.img40 {
		width: 40rpx;
		height: 40rpx;
		position: relative;
		top: 9rpx;
		margin-right: 10rpx;
	}

	.img84 {
		width: 84rpx;
		height: 84rpx;
	}

	.img250 {
		width: 250rpx;
		height: 250rpx;
	}

	.zt_img {
		position: absolute;
		right: 45rpx;
		bottom: 50rpx;
		width: 236rpx;
		height: 178rpx;
	}

	.img22 {
		width: 22upx;
		height: 22upx;
	}
</style>
